
<template>
  <div class="w100 h100">
    <div class="forgetPass" v-if="!success">
      <div class="backBtn" @click="goBack">
        <img
          style="height: 18px; width: 18px"
          src="../../assets/img/返回.png"
          alt=""
        />
        <span class="tip">返回登录</span>
      </div>
      <div class="resetPass">重置密码</div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="0px"
        class="demo-ruleForm"
      >
        <el-form-item prop="phone">
          <el-input v-model="ruleForm.phone" clearable>
            <span slot="prefix" class="prop">手机号</span>
          </el-input>
        </el-form-item>
        <el-form-item prop="verityCode">
          <el-input v-model="ruleForm.verityCode" clearable>
            <span slot="prefix" class="prop">验证码</span>
            <span
              v-show="sendAuthCode"
              slot="suffix"
              class="code"
              @click="getVerityCode"
              >获取验证码</span
            >
            <span
              v-show="!sendAuthCode"
              slot="suffix"
              class="resetGet"
              :class="{ allow: authTime == 0 }"
              @click="getVerityCode"
              >重新获取{{ codeCountNum() }}</span
            >
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="ruleForm.password" clearable>
            <span slot="prefix" class="prop">新密码</span>
          </el-input>
        </el-form-item>
        <el-form-item prop="newPassword">
          <el-input type="password" v-model="ruleForm.newPassword" clearable>
            <span slot="prefix" class="prop">确认新密码</span>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            class="w100 login-btn"
            style="
              height: 44px;
              margin-top: 30px;
              font-size: 18px;
              font-weight: 530;
            "
            type="primary"
            @click="resetPassword();btnBlur($event)"
            >确定重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div v-else class="resetSuccess">
      <el-result icon="success">
        <template slot="icon">
          <img
            style="height: 100px; width: 100px"
            src="../../assets/img/成功.png"
          />
        </template>
        <template slot="title">
          <span class="title">重置密码成功！</span>
        </template>
        <template slot="subTitle">
          <span class="subTitle">请使用新密码登录</span>
        </template>
        <template slot="extra">
          <el-button
            type="primary"
            style="height: 44px; padding: 14px 39px;font-size: 18px;
                  font-weight: 530;"
            @click="goLogin"
            >重新登录{{ countDown() }}</el-button
          >
        </template>
      </el-result>
    </div>
  </div>
</template>

<script>
import { getPhoneCode, resetPassword } from "@/api/login.js";
export default {
  data() {
    return {
      sendAuthCode: true,
      authTime: 0,
      timer: null,
      timer1: null,
      success: false,
      countNum: 3,
      ruleForm: {
        phone: "",
        verityCode: "",
        password: "",
        newPassword: "",
      },
      rules: {
        phone: [
          { required: true, message: "请输入手机号码", trigger: "change" },
          {
            message: "请输入正确的手机号码",
            trigger: "blur",
            validator: (rule, value, callback) => {
              var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
              if (!myreg.test(value)) {
                return callback(new Error("请输入正确的11位手机号码"));
              } else {
                callback();
              }
            },
          },
        ],
        verityCode: [
          { required: true, message: "请输入验证码", trigger: "change" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "change" },
          {
            message: "密码必须是包含字母、数字、特殊符号的8位以上组合",
            trigger: "blur",
            validator: (rule, value, callback) => {
              const mailReg =
                /^(?![A-Za-z0-9]+$)(?![A-Za-z\W]+$)[a-zA-Z0-9_\W]{8,}$/;
              if (!mailReg.test(value) && value) {
                return callback(
                  new Error("密码必须是包含字母、数字、特殊符号的8位以上组合")
                );
              } else {
                callback();
              }
            },
          },
        ],
        newPassword: [
          { required: true, message: "请确认验证码", trigger: "change" },
          {
            message: "密码前后不一致",
            trigger: "blur",
            validator: (rule, value, callback) => {
              if (this.ruleForm.password != value) {
                return callback(new Error("密码前后不一致"));
              } else {
                callback();
              }
            },
          },
        ],
      },
    };
  },
  created() {},
  methods: {
    btnBlur(e) {
      // el-button按钮点击后默认处于focus选中状态，手动取消掉按钮选中状态
      let target = e.target
      if(target.nodeName === 'SPAN') {
        target = e.target.parentNode
      }
      target.blur()
    },
    //返回按钮倒计时
    countDown() {
      if (this.countNum == 0) {
        return "";
      } else {
        return `(${this.countNum}S)`;
      }
    },
    //获取验证码倒计时
    codeCountNum() {
      if (this.authTime == 0) {
        return "";
      } else {
        return `(${this.authTime}s)`;
      }
    },
    goBack() {
      this.$emit("goBack");
    },
    //去登录
    goLogin() {
      this.$emit("clickLogin");
    },
    //重置密码
    async resetPassword() {
      this.$refs["ruleForm"].validate(async (valid) => {
        if (valid) {
          try {
            let formData = JSON.parse(JSON.stringify(this.ruleForm));
            delete formData.newPassword;
            formData.password = await this.$utils.encryptPassword(
              formData.password
            );
            let res = await resetPassword(formData);
            if (res.code == 200) {
              this.success = true;
              this.backBtn();
            }
          } catch (error) {}
        } else {
          return false;
        }
      });
    },
    //获取短信验证码
    getVerityCode() {
      if (this.ruleForm.phone != "") {
        if (this.authTime == 0) {
          getPhoneCode({ phone: this.ruleForm.phone })
            .then((res) => {
              this.send();
            })
            .catch((error) => {});
        }
      } else {
        this.$message.warning("请先输入手机号码");
      }
    },
    send() {
      if (!this.timer) {
        this.authTime = 60;
        this.sendAuthCode = false;
        this.timer = setInterval(() => {
          if (this.authTime > 0 && this.authTime <= 60) {
            this.authTime--;
          } else {
            clearInterval(this.timer); // 清除定时器
            this.timer = null;
          }
        }, 1000);
      }
    },
    //返回按钮定时
    backBtn() {
      if (!this.timer1) {
        this.countNum = 3;
        this.timer1 = setInterval(() => {
          if (this.countNum > 0 && this.countNum <= 5) {
            this.countNum--;
          } else {
            clearInterval(this.timer1); // 清除定时器
            this.timer1 = null;
          }
        }, 1000);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.forgetPass {
  margin: 80px 110px 154px 110px;
  height: 455px;
  text-align: center;
  font-family: Source Han Sans CN;
  .backBtn {
    width: 146px;
    height: 50px;
    text-align: left;
    line-height: 27px;
    .tip {
      cursor: pointer;
      margin-left: 5px;
      font-weight: 400;
      color: #999999;
    }
  }
  .resetPass {
    height: 30px;
    line-height: 30px;
    text-align: left;
    font-size: 24px;
    font-weight: 530;
    margin: 10px 0 40px 0;
  }
  .prop {
    font-size: 16px;
    font-weight: 400;
    color: #999999;
  }
  .code {
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    color: #0d60b4;
  }
  .click {
    cursor: pointer;
  }
  .resetGet {
    font-size: 16px;
    font-weight: 400;
    color: #cccccc;
  }
  .allow {
    cursor: pointer;
    color: #0d60b4;
  }
}
.resetSuccess {
  width: 348px;
  height: 294px;
  margin: 180px 98px 0 98px;
  font-family: Source Han Sans CN;
  text-align: center;
  .title {
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0px;
    color: #22bb5f;
  }
  .subTitle {
    font-size: 16px;
    font-weight: 400;
    color: #999999;
  }
}
/deep/.el-input--prefix .el-input__inner {
  padding-left: 100px;
}
.login-btn:focus {
  background-color: #0754A3;
}
.login-btn:active {
  background-color: #00468E;
}
</style>